<template>
  <div class="sayInfoList">
    <div class="mainSayBack"></div>
    <div id="mainSayWindow" class="boxShadow-white animate__animated animate__zoomIn" style="animation-duration: 300ms">
      <div id="background"></div>
      <div class="close-icon" id="closeDiscussBox" ><svg t="1612002036751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992" width="20" height="20">
        <path d="M846.005097 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519L96.632851 254.131955c-43.644009-43.644009-43.644009-114.348328 0-157.992337s114.348328-43.644009 157.992337 0L925.001265 766.515694c43.644009 43.644009 43.644009 114.348328 0 157.992337C903.17926 946.330036 874.592179 957.24155 846.005097 957.24155z" p-id="1993" fill="#ffffff"></path>
        <path d="M175.62902 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519-43.644009-43.644009-43.644009-114.348328 0-157.992337L767.008928 96.139617c43.644009-43.644009 114.348328-43.644009 157.992337 0s43.644009 114.348328 0 157.992337L254.625188 924.508032C232.803183 946.330036 204.216101 957.24155 175.62902 957.24155z" p-id="1994" fill="#ffffff"></path></svg></div>
      <div id="userInfo">
        <div id="head"><img :src="discussContent.headImg" id="headImg"/></div>
        <div id="nickname-time"><span style="font-size: 16px">{{discussContent.nickname}}</span><span style="font-size: 12px">{{discussContent.pushTime}}</span></div>
      </div>
      <div id="sayContent" >
<!--        <div id="title"><h1 style="font-weight: 500;font-size: 24px">{{discussContent.title}}</h1></div>-->
        <pre class="scroll">{{discussContent.discussContent}}</pre>
      </div>
      <div id="say">
        <div id="pushSay" v-if="loginState">
          <textarea class="input-100" cols="30" rows="10" style="height: 50px" placeholder="说出你的想法！"/>
          <button class="button button-color-white" style="width: 100px;height: 50px" @click="pushSay">发布</button>
        </div>
        <div id="plsLogin" v-else><span>未登陆，<span class="toLogin">登陆</span>后即可评论！还没有账号？点击<span class="toSignUp">注册</span></span></div>
      </div>
      <div id="userSayBox" class="scroll">
        <div id="user"  v-for="sayList in discussSayList" :key="sayList.id" class="animate__animated animate__fadeIn">
          <div id="headImg-sm"><img :src="sayList.headImg" alt=""></div>
          <div class="square⬅" style="margin-left: 10px"></div>
          <div id="userSayBoxContent"><span><span style="font-size: 12px;margin-left: -10px">{{sayList.nickname}}<span>:</span></span><br>{{sayList.sayContent}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import api from "../../model/api";
    import $ from "jquery";

    export default {
      name: "sayInfoList",
      props:['discussListOpen'],
      data(){
          return {
            discussSayList:[],
            discussContent:{},
            loginState: false,
          }
      },
      watch:{
        'discussListOpen': function(val){
           this.discussContent = val
          this.judgeDiscussList(val.discussId)
        },
        deep: true,
        immediate: true,
      },
      created() {
        this.isLogin()
      },
      mounted() {
        $(function () {
          $('#closeDiscussBox').click(function () {
            const saySpace = $('#saySpace')
            // saySpace.setAttribute("class", "animate__animated animate__zoomOut")
            saySpace.css('display','none')
          })
        })


        $(function () {
          $('.toLogin').click(function () {
            $('#login-box-background').css('display','flex');
            $('#logIn').css('borderBottom','solid  2px rgba(255, 255, 255, 1)');
            $('#login-box').css('display','flex');
            $('#sign-box').css('display','none');
            $("#login-box-background input").val('');
            $('#user-head-jumpBox').css('display',' none');
          })
        })
//打开注册页
        $(function () {
          $('.toSignUp').click(function () {
            $('#login-box-background').css('display','flex');
            $('#signUp').css('borderBottom','solid  2px rgba(255, 255, 255, 1)');
            $('#login-box').css('display','none');
            $('#sign-box').css('display','flex');
            $("#login-box-background input").val('');
          })
        })
      },

      methods:{
        getDiscussType(){
          const url = window.location.href;
          const urlArr = url.split("/")
          console.log(urlArr[4])
          return urlArr[4]
        },
        judgeDiscussList(discussId){
          const type =  this.getDiscussType()
          if(type === "movie"){
            this.getMovieDiscussSay(discussId)
          }
          if(type === "game"){
            this.getGameDiscussSay(discussId)
            // this.sayListIndex = this.discussList[index].discussId
          }
          if(type === "music"){
            this.getMusicDiscussSay(discussId)
          }
        },
        getGameDiscussSay(data){
            this.$axios.post("v1/getGameDiscussSay",{discussId: data}).then(res => {
              let discussSayListArr = res.data.data
              this.discussSayList = discussSayListArr.reverse()
            })
          },
        getMovieDiscussSay(data){
            this.$axios.post("v1/getMovieDiscussSay",{discussId: data}).then(res => {
              let discussSayListArr = res.data.data
              this.discussSayList = discussSayListArr.reverse()
            })
        },
        getMusicDiscussSay(data){
            this.$axios.post("v1/getMusicDiscussSay",{discussId: data}).then(res => {
              let discussSayListArr = res.data.data
              this.discussSayList = discussSayListArr.reverse()
            })
          },
        async pushSay(){
          if(await this.userRoot() === 400){
            this.$message.error('账号已封禁,无法操作')
          }else{
            const _sayContent = $("#pushSay textarea").val()
            const _discussId = this.discussContent.discussId
            console.log(this.discussContent.discussId)
            if( _sayContent !== '' && sessionStorage.token ){
              const sayObj = {
                discussId: _discussId,
                userId: String(JSON.parse(sessionStorage.user).userId),
                sayContent: _sayContent,
                sayTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
              }
              const newSayShow = {
                nickname: JSON.parse(sessionStorage.user).nickname,
                discussId: _discussId,
                headImg: JSON.parse(sessionStorage.user).headImg,
                sayContent: _sayContent,
                sayTime: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
              }
              const type = this.getDiscussType()
              if(type === "game"){
                const {data:res} = await this.$axios.post("v1/pushGameSay", sayObj)
                if(res.code === 200){
                  this.discussSayList.unshift(newSayShow)
                  $("#pushSay textarea").val('')
                  this.$message.success("评论成功")
                }else{
                  this.$message.error("评论失败")
                }
              }
              if(type === "movie"){
                const {data:res} = await this.$axios.post("v1/pushMovieSay", sayObj)
                if(res.code === 200){
                  $("#pushSay textarea").val('')
                  this.discussSayList.unshift(newSayShow)
                  this.$message.success("评论成功")
                }else{
                  this.$message.error("评论失败")
                }
              }
              if(type === "music"){
                const {data:res} = await this.$axios.post("v1/pushMusicSay", sayObj)
                if(res.code === 200){
                  $("#pushSay textarea").val('')
                  this.discussSayList.unshift(newSayShow)
                  this.$message.success("评论成功")
                }else{
                  this.$message.error("评论失败")
                }
              }
            }else{
              this.$message.warning("说点什么吧！")
            }
          }
        },
        isLogin(){
          if(sessionStorage.token){
            this.loginState = true
          }else{
            this.loginState = false
          }
        },
        async userRoot(){
          if(this.loginState === true){
            const {data:res} = await this.$axios.post('v1/judgeRoot',{userId:JSON.parse(sessionStorage.user).userId})
            return res.data.rootCode
          }
        },
      },
    }
</script>

<style lang="less" scoped>
  .sayInfoList{
    /*position: absolute;*/
    /*z-index:+2;*/
  #closeDiscussBox{
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: black;
    position: absolute;
    right: 10px;
    top: 10px;
  }
    #mainSayWindow{
      position: fixed;
      width: 650px;
      /*height: 100%;*/
      /*background-color: rgba(234, 234, 234, 1);*/
      border-radius: 6px;
      overflow: hidden;
      padding: 0 20px 20px 20px;
      margin:auto;
      left:0;
      right:0;
      top:20px;
      bottom:20px;
      z-index: +2;

    }

    #userInfo{
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
    }
    #head{
      display: flex;
    }
    #sayContent{
      width: 100%;
      height: 200px;
      border-radius: 6px;
      overflow: hidden;
      /*overflow-y: auto;*/
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;
      pre{
        height: 100%;
        white-space: pre-wrap;
        overflow-y: auto;
        /*background-color: red;*/
      }
    }
    #title{
      width: 610px;
      height: 50px;
      background: white;
      display: flex;
      align-items: center;

    }
    #headImg{
      width: 35px;
      height: 35px;
      background-color: black;
      border-radius: 6px;
    }
    #nickname-time{
      display: flex;
      flex-flow: column;
      margin-left: 10px;
    }
    textarea{
      border-radius: 6px;
      height: 80px;
      resize: none;
      padding: 5px 10px;
      margin-right: 20px;
      white-space: normal;
    }
    #pushSay{
      padding:10px 0;
      display: flex;
    }
    #headImg-sm{
      width: 30px;
      height: 30px;
      background-color: white;
      border-radius: 6px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }

    #userSayBoxContent{
      max-width: 550px;
      border-radius: 0 6px 6px 6px;
      background-color: var(--theme-button);
      padding: 3px 20px 10px 20px;
      font-size: 16px;
      overflow: hidden;
      color: var(--theme-fontMain);
      span{
        /*width: 100%;*/
        white-space: normal;
        word-break: break-all;
        /*text-align: justify;*/

      }
    }
    #user{
      display: flex;
      /*background-color: red;*/
      margin-bottom: 10px;
    }
    #userSayBox{
      height: calc(100% - 322px);
      overflow-y: auto;
    }
    #plsLogin{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      margin: 10px 0;
      background-color: var(--theme-button);
      border-radius: 6px;
      span{
        /*margin-left: 10px;*/
        font-size: 14px;
        color: var(--theme-fontMain);
      }
      .toLogin,.toSignUp{
        color: #8148ba;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
      }
      .toLogin:hover,.toSignUp:hover{
        color: #9e5bdf;

      }
    }


  }

</style>
